import React, { useState } from 'react'
import { Table, Button } from 'antd'
import { useNavigate } from 'react-router-dom'
import ItemModal from '~/components/item-modal'

let cacheRecord: any = {}

const colums: any = ({ handleNavToProperty, setModalVisible }: any) => [
  {
    title: '序号',
    dataIndex: 'id',
    align: 'center',
    render: (_: any, record: any, index: number) => <div>{index + 1}</div>
  },
  {
    title: '物品编号',
    dataIndex: 'serialNo',
    align: 'center',
    render: (serialNo: any, record: any) => (
      <a
        onClick={() => {
          cacheRecord = record
          setModalVisible(true)
        }}
      >
        {serialNo}
      </a>
    )
  },
  {
    title: '物品名称',
    dataIndex: 'itemName',
    align: 'center',
    render: (itemName: any, record: any) => (
      <a
        onClick={() => {
          cacheRecord = record
          setModalVisible(true)
        }}
      >
        {itemName}
      </a>
    )
  },
  {
    title: '物品数量',
    align: 'center',
    dataIndex: 'totalNumber',
    render: (_: any, record: any) => <div>{record.itemStock.totalNumber}</div>
  },
  {
    title: '计量单位',
    align: 'center',
    dataIndex: 'unitName',
    key: 'unitName',
    render: (_: any, record: any) => <div>{record.itemStock.unitName}</div>
  },
  {
    title: '特征',
    align: 'center',
    dataIndex: 'feature',
    key: 'feature'
  },
  {
    title: '操作',
    dataIndex: 'age4',
    align: 'center',
    key: 'age',
    render: (_: any, record: any) => (
      <>
        <Button type="primary" size="small" onClick={() => handleNavToProperty({ ...record, caseState: 1 })}>
          关联图片
        </Button>
        <Button
          style={{ marginLeft: 8 }}
          type="primary"
          size="small"
          onClick={() => handleNavToProperty({ ...record, caseState: 2 })}
        >
          查看图片
        </Button>
      </>
    )
  }
]

const WaitingList = ({ waitList }: any) => {
  const [modalVisible, setModalVisible] = useState(false)
  const navigate = useNavigate()

  const handleNavToProperty = (record: any) => {
    if (record.caseState === 1) {
      navigate('/item-picture', { state: record })
    } else {
      navigate('/img-lists', { state: record })
    }
  }
  return (
    <div>
      <Table
        pagination={{
          size: 'default',
          total: waitList.length,
          showSizeChanger: true,
          showQuickJumper: true,
          showTotal: total => `共 ${total} 条`
        }}
        bordered
        rowKey="id"
        dataSource={waitList}
        columns={colums({ handleNavToProperty, setModalVisible })}
      />
      <ItemModal visible={modalVisible} setVisible={setModalVisible} record={cacheRecord} />
    </div>
  )
}

export default WaitingList
